<template>
  <div class="c-translucent-balck80 c-p c-flex-column c-pt140 c-h">
    <swiper v-if="swiperList.length > 0" id="promotionSwiper" ref="mySwiper" :options="swiperOption" class="c-p ww376">
      <swiper-slide v-for="(item, index) in swiperList" :key="index" class="c-p">
        <img :class="'swiper-img' + index" class="c-w100" :src="$addXossFilter(item)">
      </swiper-slide>
    </swiper>
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'PromotionImgs',
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      companyName: window.localStorage.getItem("companyName"),
      swiperList: [
        'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/agent/promotion1.png',
        'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/agent/promotion2.png',
        'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/agent/promotion3.png',
        'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/agent/promotion4.png',
        'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/agent/promotion5.png',
      ],
    }
  },
  created() {
    let that = this;
    that.swiperOption = {
      pagination: {
        el: '.swiper-pagination',
      },
      loop: true,
      speed: 300,
      autoHeight: true,
      updateOnImagesReady: true,
      observer: true,
    };
  },
  mounted() {

  },
  methods: {
    goPromotionSwiper() {
      this.$routerGo(this, "push", { path: "/homePage/wxecshop/promotionImgs" });
    },
    goSharerAdd() {
      this.$routerGo(this, "push", { path: "/homePage/wxecshop/sharerAdd" });
    },
  },
  activated() {
    setDocumentTitle('视频号分享员');
  },
  deactivated() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn1 {
  background-color: #F74163;
  color: #fff;
}
.btn2 {
  background: #f741631a;
  border: 2px solid #F74163;
}
.bg-F6F7FB {
  background-color: #F6F7FB;
}
#promotionSwiper .swiper-slide {
  transform: scale(0.7) !important;
}
#promotionSwiper .swiper-slide-active {
  transform: scale(1) !important;
}
/deep/ .swiper-pagination-bullet {
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.4rem;
  border-radius: 0.2rem;
}
/deep/ .swiper-pagination-bullet-active {
  background: #fff;
}
.swiper-pagination {
  width: 100%;
  top: 21rem;
}
.ww376 {
  width: 9.4rem;
}
</style>
